<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM节点操作2</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            //单层包裹
            // $('div').wrap('<strong></strong>');//第一种方法:用strong把div包裹起来了
            // $('div').wrap('<strong />');//第二种方法: 如果没有内容的话可以这样写用strong把div包裹起来了
            // $('div').wrap('<strong>我是粗体</strong>');//新元素有内容  包裹的元素是添加到内容后面

            //多层包裹
            // $('div').wrap('<strong><em></em></strong>');//把div放在em后面

            // $('div').wrap('<strong></strong>');//添加单层包裹
            // $('div').unwrap();//删除单层包裹

            // $('div').wrap('<strong><em></em></strong>');//把div放在em后面
            // $('div').unwrap();//删除离div最近的哪个元素删除 逐层删除
            // $('div').unwrap();//删除离div最近的哪个元素删除 有几个需要删除几次 根据需要
            //
            // $('div').wrap('<strong></strong>');// 用wrap多个div分别被strong包裹
            // $('div').wrapAll('<strong></strong>');//用warpAll()多个div会被strong包裹在一起

            // $('div').wrapInner('<strong></strong>');//在已有的元素内部添加标签 比如:在div内部添加strong标签
            $('div').click(function () {
                alert("123");
            });
            // $('div').clone(true).appendTo('body');//克隆元素添加到目标元素中
            // // $('div').clone();

            // $('div').remove();//全部的div已删
            // $('div').remove().appendTo('body');//先删除 在增加 失去了功能 比如点击事件
            // $('div').detach().appendTo('body');//先删除 在增加 保留功能 比如点击事件

            // $('div').empty();//删除节点内的文本内容 节点存在

            $('div').replaceWith('<span>我是span</span>');//把元素和元素的内容整体替换掉

        });
    </script>
</head>
<body>
<script>
    /*包裹节点操作 节点接替换 克隆删除操作
            1.单层包裹纯粹的新元素没内容两种方法
                    1.$('div').wrap('<strong></strong>') 表示用strong包裹div strong里没内容
                   2.$('div').wrap('<strong />')
                单层包裹新元素有内容  包裹的元素是添加到内容后面
                    $('div').wrap('<strong>我是粗体</strong>')
            2.多层包裹
                $('div').wrap('<strong><em></em></strong>')
            3.删除包裹
                $('div').unwrap();//删除单层包裹

                $('div').wrap('<strong><em></em></strong>');//把div放在em后面
                $('div').unwrap();//删除离div最近的哪个元素删除 逐层删除
                $('div').unwrap();//删除离div最近的哪个元素删除 有几个需要删除几次 根据需要
            4.  有多个div 用strong包裹是 分别包裹起来的
               $('div').wrap('<strong></strong>');

           5.用warpAll()会将div用strong包裹在一起
               $('div').wrapAll('<strong></strong>')

           6.在已有的元素内部添加标签 比如:在div内部添加strong标签
               $('div').wrapInner('<strong></strong>')
           7. 克隆 元素
                $('div').clone().appendTo('body')
           8.先删除 在增加 失去了功能 比如点击事件
                 $('div').remove().appendTo('body')
           9.先删除 在增加 具有所有的功能  比如点击事件
                $('div').detach().appendTo('body');
          10.清空节点内的内容 节点是存在的
            $('div').empty()
          11.把元素和元素的内容整体替换掉
            $('div').replaceWith('<span>我是span</span>')
    * */
</script>
     <div>用jquery操作css</div>
    <div>1223</div>

</body>
</html>